<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cover {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.3);
            z-index: 99;
        }

        .modal {
            width: 300px;
            height: 200px;
            background-color: white;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -150px;
            z-index: 1000;
        }
        .hide {
            display: none;
        }

    </style>
</head>
<body>

<button id="add">新增</button>
<table border="1">
    <thead>
    <tr>
        <th>#</th>
        <th>姓名</th>
        <th>爱好</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><input type="checkbox"></td>
        <td>金老板</td>
        <td>开车</td>
        <td>
            <button class="fire">开除</button>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>景女神</td>
        <td>茶道</td>
        <td>
            <button class="fire">开除</button>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>苑昊（苑局）</td>
        <td>不洗头、不翻车、不要脸</td>
        <td>
            <button class="fire">开除</button>
        </td>
    </tr>

    </tbody>
</table>

<div class="cover hide"></div>
<div class="modal hide">
    <div>
        <label>姓名：
            <input type="text" id="name">
        </label>
    </div>
    <div>
        <label>爱好：
            <input type="text" id="hobby">
        </label>
    </div>
    <button id="cancel" type="button">取消</button>
    <button id="submit" type="button">提交</button>

</div>


</body>
<script src="jquery.js"></script>
<script>

    // 点击新增按钮
    $('#add').click(function () {
        // 清空两个input标签
        $('#name').val('');
        $('#hobby').val('');
        $('.cover,.modal').removeClass('hide');

    });

    // 点击取消按钮
    $('#cancel').click(function () {
        $('.cover,.modal').addClass('hide');
    });


    // 点击保存按钮
    $('#submit').click(function () {
        // 1.1 获取到用户输入的值
        var username = $('#name').val();
        var hobby = $('#hobby').val();

        // 1.2 将输入放到tr标签的td标签里面

        // var trEle = '<tr><td><input type="checkbox"></td><td>'+ username + '</td><td>'+hobby + '</td><td><button class="fire">开除</button></td></tr>'

        var trEle = `
            <tr>
                <td><input type="checkbox"></td>
                <td>${ username }</td>
                <td>${ hobby }</td>
                <td>
                    <button class="fire">开除</button>
                </td>
            </tr>

        `;

        $('tbody').append(trEle);
        $('.cover,.modal').addClass('hide');

    });


    // 开除,找到这一行的tr标签,然后删除
    $('tbody').on('click','.fire',function () {
        $(this).parent().parent().remove();
        // console.log(this);
        // this.remove();
    });


</script>



</html>